<template>
  <div class="com-container">
    <div ref="chart" class="com-chart">年龄与睡眠质量折线图</div>
  </div>
</template>

<script>
import { markRaw } from 'vue';
import * as echarts from 'echarts'
require('echarts/theme/dark');
export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    initChart() {
      this.chartInstance = markRaw(echarts.init(this.$refs.chart, 'dark'))
      const initOption = {
        title: {
          text: '▎ 年龄与睡眠质量折线图',
          top: 8,
          left: 8,
          itemStyle: {
            fontSize: '',
          },
        },
        grid: {
          top: '20%',
          left: '12%',
          right: '12%',
          bottom: '10%',
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed',
            },
          },
        },
        yAxis: {
          type: 'value',
          max: 7.00,
          min: 6.70,
          splitNumber: 3,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
            },
          },
        },
        series: [
          {
            type: 'line',
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
              // 在这里定义数据点的样式
              color: 'white', // 设置数据点的颜色为红色
              borderColor: '#ea6f21', // 设置数据点边框的颜色为黑色
              borderWidth: 1, // 设置数据点边框的宽度为1像素
            },
            lineStyle: {
              normal: {
                color: '#ea6f21',
                width: 3,
              },
            },
            tooltip: {
              show: false,
            },
            label: {
              show: true,
              position: 'top',
              distance: 10,
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                    offset: 0,
                    color: 'rgba(236, 169, 44, 1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(236, 169, 44,0)',
                  },
                  ],
                  false
                ),
              },
            },
          }
        ]
      }
      this.chartInstance.setOption(initOption)
    },
    async getData() {
      // 获取服务器数据
      const { data: ret } = await this.$axios.get('chart3')
      this.allData = ret
      this.updataChart()
    },
    updataChart() {
      const dataOption = {
        xAxis: {
          data: this.allData.age,
        },
        series: [
          {
            data: this.allData.quality,
          }
        ]
      }
      this.chartInstance.setOption(dataOption)
    },
    screenAdapter() {
      const titleFontSize = this.$refs.chart.offsetWidth / 100 * 4
      console.log('1:'+ titleFontSize)
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        series: [
          {
            symbolSize: titleFontSize / 5.5,
            label: {
              distance: titleFontSize / 6,
            },
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    }
  },

}
</script>

<style></style>